<template>
    <div class="login-container">
        <el-form style="max-width: 400px;" label-width="80px" :data="loginData">
            <el-form-item>
                <span style="font-size: 30px;">溯源管理登录系统</span>
            </el-form-item>
            <el-form-item label="用户名：">
                <el-input v-model="loginData.userAccount" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
                <el-input v-model="loginData.userPassword" placeholder="请输入密码" type="password"
                    prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
            </el-form-item>
            <el-form-item>
                <el-link style="text-align: center; display: block;">忘记密码？</el-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();

const router = useRouter();

const loginData = reactive<any>(
    {
        userAccount: "",
        userPassword: ""
    }
)

const login = () => {
    if (loginData.userAccount.length == 0) {
        ElMessage.error("请输入用户名!");
        return;
    }
    if (loginData.userPassword.length == 0) {
        ElMessage.error("请输入密码!");
        return;
    }
    axios.get("http://localhost:5244/api/TraceabilityManagementRead/Login/LoginAsync",
        {
            params: {
                account: loginData.userAccount,
                password: loginData.userPassword
            }
        }
    )
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message);
                store.currentUser.userNickName = res.data.data.userNickName;
                store.currentUser.roleId = res.data.data.roleId;
                store.currentUser.roleName = res.data.data.roleName;
                store.currentUser.permissionId = res.data.data.permissionId;
                store.currentUser.PermissionName = res.data.data.PermissionName;
                router.push({
                    path: "/MianView"
                });
            }
            else {
                ElMessage.error(res.data.message);
                return;
            }
        })
}
</script>

<style scoped>
.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 填满整个视口的高度 */
    width: 100%;
    /* 填满整个视口的宽度 */
}
</style>